<template>
  <div class="portalContainer">
    <grid-layout
      :layout.sync="portalConfData"
      :col-num="12"
      :row-height="30"
      :is-draggable="false"
      :is-resizable="false"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[5, 5]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="(item, index) in portalConfData"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
      >
        <render :conf="item" />
      </grid-item>
    </grid-layout>
  </div>
</template>
<script>
import render from "@/components/render/render.js";
import VueGridLayout from "vue-grid-layout";
export default {
  components: {
    render,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
  props: {
    portalConfData: {
      //门户页面组件配置
      type: Array,
      required: true,
    },
    page: {
      type: String,
    },
  },
  data() {
    return {
      pageWidth: 0,
    };
  },

  mounted() {
    if (this.page === "dialog") {
      this.pageWidth = document.getElementById("app").scrollWidth;
      // this.pageHeight = document.getElementById("app").scrollHeight;
      this.portalConfData.forEach((comp) => {
        console.log(comp,'comp')
        comp.width = this.pageWidth * comp.parcentWidth;
        // comp.height = this.pageHeight * comp.parcentHeight;
      });
    }
  },
};
</script>
<style lang="scss">
// 隐藏vue-drag-resize的border和outline
.portalContainer {
  width: 100%;
  height: 100%;
  .vdr {
    border: 0px;
  }
  .active::before {
    content: "";
    width: 100%;
    height: 90%;
    top: 0;
    left: 0;
    outline: none;
  }
}
</style>
